<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">用户id:</span>
        <el-input v-model="uid" placeholder="请输入用户id" style="width:55%" @keyup.enter.native="handleSearch(1)"></el-input>
      </el-col>
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">券id:</span>
        <el-input v-model="qid" placeholder="请输入券id" style="width:55%" @keyup.enter.native="handleSearch(1)"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="handleSearch(1)" style="25%;">搜索</el-button>
      </el-col>
    </el-row>
    <el-table 
    :data="capital" 
    border 
    :row-class-name="tableRowClassName"
    style="width: 100%;margin-top: 30px;">
      </el-table-column>
      <el-table-column v-for="(item,index) in capitalTit" :key="index" :prop="item.prop" :label="item.label" :min-width="item.width">
      </el-table-column>
    </el-table>
    <div style="margin: 30px 0;">
      <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 't_jxq',
  data() {
    const uid = this.$route.params.id
    return {
      uid,
      qid: '',
      total: 0,
      page:1,
      pageSize: 10,
      capitalTit: [{
        prop: 'id',
        label: 'id',
        width: '100'
      }, {
        prop: 'fuid',
        label: '用户ID',
        width: '100'
      }, {
        prop: 'csm',
        label: '加息券名称',
        width: '100'
      }, {
        prop: 'fjxbl',
        label: '加息比率',
        width: '120'
      }, {
        prop: 'fjxlb',
        label: '加息类别',
        width: '100'
      }, {
        prop: 'isday',
        label: '加息属性',
        width: '100'
      }, {
        prop: 'tdate',
        label: '发放时间',
        width: '100'
      }, {
        prop: 'tdqsj',
        label: '到期时间',
        width: '100'
      }, {
        prop: 'tjhsj',
        label: '激活时间',
        width: '100'
      }, {
        prop: 'ftze',
        label: '要求投资额',
        width: '100'
      }, {
        prop: 'fqx',
        label: '要求期限',
        width: '100'
      }, {
        prop: 'fbid',
        label: '标ID',
        width: '100'
      }, {
        prop: 'ftzjlid',
        label: '投资记录ID',
        width: '100'
      }
      ],
      capital: [],
    }
  },
  mounted(){
    this.handleSearch(1)
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this.search()
    },
    tableRowClassName(row, index) {
      if(row.gqbs===1){
         return 'info-rows';
       }
    },
    handleSearch(index){
      this.page = index
      this.search()
    },
    search() {
      
      this.$get(this, {
        api: 'member/jxq.do', data: {
          fuid: this.uid,
          id: this.qid,
          pageSize: this.pageSize,
          page:this.page
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          this.capital = data.content.data
          if (this.page === 1) {
            this.total = data.content.num
          }
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  }
}
</script>
<style>
.el-table .info-rows td:nth-child(8) .cell{
    color:red !important;
  }

</style>
